<template>
  <div class="app">
    <!-- 搜索栏 -->
    <div class="search-bar">
      设备:<input type="text" placeholder="请输入设备" v-model="formData.equipmentId" style="width: 160px;margin-left: 7px;"/>
      故障描述:<input type="text" placeholder="故障描述" v-model="formData.description" style="width: 160px;margin-left: 7px;"/>
      处理人:<input type="text" placeholder="处理人" v-model="formData.handler" style="width: 160px;margin-left: 7px;"/>

      <el-date-picker
        v-model="formData.startTime"
         value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="开始日期"
        style="margin: 0 10px; width: 140px;"
      ></el-date-picker>
      至
      <el-date-picker
        v-model="formData.complete"
         value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="结束日期"
        style="margin: 0 10px; width: 140px;"
      ></el-date-picker>

      <el-select v-model="formData.status" placeholder="状态" style="width: 120px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="未分配" value="未分配"></el-option>
        <el-option label="已分配" value="已分配"></el-option>
        <el-option label="完全确认" value="完全确认"></el-option>
      </el-select>

      <!-- <el-select v-model="filters.repairType"  placeholder="维修类型" style="width: 120px; margin-left: 10px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="电气维修" value="电气维修"></el-option>
        <el-option label="机械维修" value="机械维修"></el-option>
      </el-select>

      <el-select v-model="filters.faultType" placeholder="故障类型" style="width: 120px; margin-left: 10px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="系统故障" value="系统故障"></el-option>
        <el-option label="电路故障" value="电路故障"></el-option>
        <el-option label="设备老化" value="设备老化"></el-option>
      </el-select>   -->

      <el-button type="primary" @click="getAreaList" style="margin-left: 10px;">
        <i class="el-icon-search"></i> 查询
      </el-button>

      <el-button type="primary" @click="handleExport" style="margin-left: 10px;">导出</el-button>
      <el-button type="primary" @click="resest" style="margin-left: 10px;">重置</el-button>

    </div>

    <!-- 表格 -->
    <el-table :data="filteredData" stripe border  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
      <el-table-column prop="areaName" label="区域" width="150"></el-table-column>
      <el-table-column prop="equipmentId" label="设备ID" width="150"></el-table-column>
      <el-table-column prop="description" label="故障描述" width="300"></el-table-column>
      <el-table-column prop="handler" label="处理人" width="200"></el-table-column>
      <!-- <el-table-column prop="severity" label="严重程度" width="100"></el-table-column>   -->
      <el-table-column prop="status" label="状态" width="200"></el-table-column>
      <el-table-column prop="startTime" label="发起时间" width="180"></el-table-column>
      <el-table-column prop="complete" label="处理时间" width="200"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>


         <pagination
          v-if="showSb"
          :total="totalOn"
          :page.sync="formData.pageNum"
          :limit.sync="formData.pageSize"
          @pagination="getAreaList"
        />



    <!-- 查看详情弹窗 -->
    <el-dialog :visible.sync="detailDialogVisible" title="工单详情" width="60%">
      <div class="details-container">
        <!-- 工单详情 -->
        <section class="details-section">
          <div class="row">
            <div class="item"><b>设备名称：</b>{{ selectedRow.equipmentName }}</div>
            <div class="item"><b>设备编号：</b>{{ selectedRow.equipmentId }}</div>
          </div>
          <div class="row">
            <div class="item"><b>地点：</b>{{ selectedRow.areaName }}</div>
            <div class="item"><b>创建日期：</b>{{ selectedRow.startTime }}</div>
          </div>
          <div class="row">
            <div class="item"><b>描述：</b>{{ selectedRow.description }}</div>
            <div class="item"><b>点检人员：</b>{{ selectedRow.handler }} </div>
          </div>
          <div class="row">
            <div class="item"><b>处理时间：</b>{{ selectedRow.complete }}</div>
            <div class="item"><b>处理过程：</b>{{ selectedRow.reason }} </div>
          </div>


<div class="row">
  <div v-for="(file, index) in fileList" :key="index" class="item">
    <div style="display: flex; align-items: center; gap: 8px">
      <span>{{ file.fileName }}</span>
      <el-button
        size="mini"
        type="primary"
        @click="downloadFile(file)"
        v-hasPermi="['system:workorder:download']"
      >
        <i class="el-icon-download"></i>
        下载
      </el-button>
    </div>
  </div>
</div>
        </section>

        <!-- 流转信息 -->
        <!-- <section class="details-section">
          <h4>流转信息</h4>
          <el-table :data="motionInfo" border stripe>
            <el-table-column prop="operator" label="操作人" align="center"></el-table-column>
            <el-table-column prop="action" label="操作内容" align="center"></el-table-column>
            <el-table-column prop="time" label="操作时间" align="center"></el-table-column>
            <el-table-column prop="status" label="保修单状态" align="center"></el-table-column>
          </el-table>
        </section>   -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {listWork,listWorkFile} from "@/api/wushui/inspection";
import { download } from "@/utils/request";
export default {
  data() {
    return {
      motionInfo:[],
        queryParams: {
        fileId: null
      },
      totalOn:0,
      showSb:true,
      formData:{
        startTime:'',
        complete:'',
        pageNum: 1,
        pageSize: 10,

      },
      filters: {
        query: "",
        startDate: "",
        endDate: "",
        status: "",
        repairType: null  ,
        faultType: null  ,
      },
      tableData: [
      ],
      filteredData:[
      ],
      detailDialogVisible: false,
      selectedRow: {},
      loading:false,
      fileList:[]
    };
  },
  computed: {

  },
  created(){
    this.getAreaList();
  },
  methods: {
    resest(){
      this.formData={
            startTime:'',
            complete:'',
            pageNum: 1,
            pageSize: 10,
            equipmentId :'',
            description:'',
            handler :'',
            startTime :'',
            complete :'',
            status:'',
      }
    },
        //下载相关
    downloadFile(selectedRow) {
      // 获取服务器上的文件路径
    const filePath = encodeURIComponent(selectedRow.filePath); // 确保路径是 URL 安全的
    const posturl = '/plan/schedule/downScFile';
    const params = { filePath: selectedRow.filePath };
      download(posturl, params, filePath).then(() => {
        console.log('下载成功');
      }).catch(error => {
        console.error('下载失败', error);
      });

    },
    handleExport() {
      this.download('plan/schedule/workorder/export', {
        ...this.formData
      }, `${new Date().getTime()}.xlsx`)
    },
/** 查询文件上传列表 */
    getFileList() {
      listWorkFile(this.queryParams).then(response => {
        this.fileList = response.data;
      });
    },
    getAreaList(){
        listWork(this.formData).then((response) => {
          this.filteredData=response.rows;
          this.totalOn=response.total;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    filterTable() {
      console.log("筛选条件", this.filters);
    },
    viewDetails(row) {
if (row.completeFileId && row.completeFileId.length > 1) {
  this.queryParams.fileId = row.completeFileId;
  this.getFileList();
}
      this.selectedRow = row;
      this.detailDialogVisible = true;
    },
  },
};
</script>

<style scoped>

.app {
  padding: 20px;
  background-color: #f7f9fc;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  /* background: #fff;   */
  border-radius: 8px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);   */
  margin-bottom: 20px;
}

.search-bar input {
  width: 240px;
  padding: 6px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}

.details-container {
  font-size: 14px;
  color: #333;
}

.details-container h3 {
  font-size: 16px;
  margin-top: 10px;
  color: #409eff;
}

.details-container p {
  line-height: 1.8;
}

.details-container span {
  color: #606266;
  font-weight: bold;
}
/* 弹窗样式 */
.details-container {
  font-size: 14px;
  color: #333;
}

.details-section {
  margin-bottom: 16px;
}

.details-section h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #409eff;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.item {
  flex: 1;
  margin-right: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.item b {
  font-weight: bold;
  color: #606266;
}

.el-table {
  margin: 0;
}
</style>
